<template>
	<view>
        <scroll-view
        :style="'height:'+height+'px;'"
        	class="list-scroll-content " 
        	scroll-y
        	@scrolltolower="message"
          
        
        >
		<view class="notice-item" v-for="item in notify" :key="item.id">
			<text class="time">{{item.created_at}}</text>
			<view class="content">
				<text class="title">
				    {{item.title}}
					<text class="tag" v-show="item.read === null">未读</text>
				</text>
				<view class="img-wrapper" v-show ="item.cover_img !== null">
					<image class="pic" :src="item.cover_img"></image>
				</view>
				<text class="introduce">
					{{item.content}}
				</text>
				<view class="bot b-t" @click="navTo('/pages/notice/noticedesc?notify_id=' + item.notify_id)">
					<text>查看详情</text>
					<text class="more-icon yticon icon-you"></text>
				</view>
			</view>
		</view>
            <uni-load-more :status="loadingType"></uni-load-more>
		 </scroll-view>
     
	</view>
</template>

<script>
	import {getOne} from '../../api/publicapi.js'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
        components: {
             uniLoadMore
        },
		data() {
			return {
				notify: [],
                height:0,
                loadingType:'more',
                page:1
			}
		},
        onLoad (){
            let that =this
            uni.getSystemInfo({
                success: function (res) {
                    console.log(res)
                        that.height = res.windowHeight
                
                }
            });
        } ,
		onShow() {
            this.loadingType = 'more'
			this.message();
		},
		methods: {
			
			navTo(url){
				uni.navigateTo({
					url
				})
			}, 
			message(){
                
                if(this.loadingType === 'loading' || this.loadingType === 'noMore' ){
                    //防止重复加载
                    return;
                }
                 this.loadingType = 'loading';
                getOne('front/message',{page:this.page}).then(res => {
					if (res.data !== undefined) {
                        if(res.data.length>0){
                            this.page += 1
                            for (var i = 0; i < res.data.length; i++) {
                             
                               this.notify.push(res.data [i]) 
                            }
                         this.loadingType = 'more'
                        }else{
                          this.loadingType = 'noMore';
                        }
				
					} else {
                         this.loadingType = 'noMore';
						msg(res.data.message)
					}
					
				})
			},
		}
	}
</script>

<style lang='scss'>
	page {
		background-color: #f7f7f7;
		padding-bottom: 30upx;
	}

	.notice-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.time {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80upx;
		padding-top: 10upx;
		font-size: 26upx;
		color: #7d7d7d;
	}

	.content {
		width: 710upx;
		padding: 0 24upx;
		background-color: #fff;
		border-radius: 4upx;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90upx;
		font-size: 32upx;
		color: #303133;
		.tag {
			position: absolute;
			right: 50upx;
			color: #d23931;
		}
	}
	
	.img-wrapper {
		width: 100%;
		height: 260upx;
		position: relative;
	}

	.pic {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		font-size: 36upx;
		color: #fff;
	}

	.introduce {
		display: inline-block;
		padding: 16upx 0;
		font-size: 28upx;
		color: #606266;
		line-height: 38upx;
	}

	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80upx;
		font-size: 24upx;
		color: #707070;
		position: relative;
	}

	.more-icon {
		font-size: 32upx;
	}
</style>
